<template>
	<div>
		<!-- 最外围添加div用来承接父组件处传递的的样式 -->
		<div
			class="app-control-portlet control-container app-control-dashboard__item"
		>
			<div class="app-control-portlet-header-container">
				<p
					v-if="isShowTitle && title"
					class="control-header app-control-portlet__header"
				>
					<span class="control-header__caption">
						<template v-if="image">
							<i v-if="image.cssClass" :class="image.cssClass" />
							<img v-else-if="image.imagePath" :src="image?.imagePath" />
						</template>
						{{ textPSLanguageRes ? $t(textPSLanguageRes, title) : title }}
					</span>
					<span class="control-header__right">
						<span class="header__action">
							<a
								@click="
									($event) => {
										handleActionClick($event, item);
									}
								"
								v-for="item in actions"
								:key="item.name"
							>
								<template v-if="item.showIcon">
									<i v-if="item.iconClass" :class="item.iconClass" />
									<img v-else-if="item.imgPath" :src="item.imgPath" />
								</template>
								<span v-if="item.showCaption">{{ item.caption }}</span>
							</a>
						</span>
					</span>
				</p>
				<div class="app-control-portlet__content">
					<slot></slot>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
import { IEvent } from '@/core';
import { portletProps } from './portlet';
const props = defineProps(portletProps);
interface ComponentEmit {
	(name: 'component-action', value: IEvent<string>): void;
}
const emit = defineEmits<ComponentEmit>();
const handleActionClick = (event: any, item: any) => {
	emit('component-action', {
		name: props.name,
		action: 'portletAction',
		data: {
			event,
			logic: {
				name: item.logic.name,
				actionTag: item.logic.actionTag,
				actionDECodeName: item.logic.actionDECodeName,
				predefinedType: item.logic.predefinedType,
			},
		},
	});
};
</script>
